<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">
    <script src="layui-v2.6.8/layui/layui.js"></script>

    <!-- art-template是js库，是一个简约、超快的模板引擎，用于简化拼接字符串，把js中的数据传到html中展示出来 -->
    <script src="template-web.js"></script>
</head>
<body>
    <!-- 
        语法：
            {{ 对象中的属性名 }}
            {{ each 数组名 value index }}
            {{ /each }} 
    -->
    <!-- 第一步：定义一个模板 -->
    <script id="demo" type="text/html">
        <table class="layui-table">
            <thead>
              <tr>
                <th>昵称</th>
                <th>加入时间</th>
                <th>签名</th>
              </tr> 
            </thead>
            <tbody>
                {{ each user value index }}
                    <tr> 
                        <td>{{ value.id }} </td>
                        <td>{{ value.name }}</td>
                        <td>{{ value.age }}</td>
                    </tr>
                {{ /each }}
            </tbody>
          </table>
    </script>
    <!-- 第二步：创建一个盛放模板的容器，用于呈现渲染效果 -->
    <div  id="mydiv"></div>

    <script>
         var objs = [
            {
                id: 1001,
                name: "alice",
                age: 30
            },
            {
                id: 1002,
                name: "tom",
                age: 40
            }
        ];


        // 第三步：将数据加载到模板中去
        // 直接调用template模板方法，完成数据的填充
        // template(id,data);
        // id:模板id
        // data：模板需要的数据，data参数必须传入的是对象，模板是通过对象进行数据获取的，返回的是一个根据模板完成数据填充后的页面结构的字符串
        var users={"user":objs};
        var str=template("demo",users);//string
        var divDom=document.getElementById("mydiv");
        divDom.innerHTML=str;
    </script>


</body>
</html>